<template>
	<view class="withdraw">
		<u-navbar
			back-text="提现"
			:background="{
				background: 'transparent'
			}"
		></u-navbar>
		<view class="card">
			<view class="header u-flex u-row-between u-col-center" @click="gobangding">
				<view class="u-flex u-row-around u-col-center">
					<u-icon name="zhifubao-circle-fill" color="#2979ff" :size="50"></u-icon>
					<text style="color:#101010;font-size: 14px;margin-left: 36rpx;">提现至支付宝</text>
				</view>
				<view class="u-flex u-row-around u-col-center">
					<text :style="{ color: phone == '' ? '#BFBFBF' : '#404040', fontSize: '28rpx' }">{{ phone !== '' ? phone : '未设置支付宝账号' }}</text>
					<u-icon name="arrow-right" color="#000000" :size="36"></u-icon>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 26rpx;">
			<view class="" style="color: #101010;margin-bottom: 38rpx;">提现金额</view>
			<view class="u-flex u-row-left u-col-center">
				<u-icon name="rmb" color="#919191" :size="42"></u-icon>
				<u-field
					v-model="withdraw"
					:label-width="0"
					:field-style="{
						height: '80rpx',
						fontSize: withdraw === '' ? '28rpx' : '56rpx'
					}"
					placeholder="最小提现金额 1 元（免手续费）"
				></u-field>
			</view>
			<view class="u-flex u-row-between u-col-center" style="margin-top: 12rpx;">
				<text style="color: #BFBFBF;">可提现 {{ price }} 元</text>
				<text style="color: #F2682C;" @click="doall">全部提现</text>
			</view>
		</view>
		<view class="btnbox">
			<u-button
				shape="circle"
				:ripple="true"
				:hair-line="false"
				ripple-bg-color="rgba(255,255,255,0.3)"
				:disabled="btndisabled"
				:custom-style="{
					backgroundColor: '#F2682C',
					color: '#FFFFFF',
					fontWeight: 600,
					boxShadow: '0px 0px 12rpx 0px rgba(242, 104, 44, 100)',
					margin: '0 20rpx'
				}"
				@click="dowithdraw"
			>
				<text class="bold" style="font-size: 36rpx;">确认提现</text>
			</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'withdraw',
	data() {
		return {
			scrollTop: 0,
			withdraw: '',
			btndisabled: true,
			phone: '',
			price: uni.getStorageSync('price') ? uni.getStorageSync('price') : 0
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	onLoad(option) {
		// console.log(uni.getStorageSync('assets').price )
	},
	watch: {
		withdraw: function(val) {
			if (val !== '') {
				this.btndisabled = false;
			} else {
				this.btndisabled = true;
			}
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		this.phone = uni.getStorageSync('jxuser').alipay_account ? uni.getStorageSync('jxuser').alipay_account : '';
	},
	//前台进入后台
	onHide() {},
	methods: {
		gobangding() {
			uni.navigateTo({
				url: '/pages/center/setting/setAlipay'
			});
		},
		doall() {
			if (this.price !== 0) {
				this.withdraw = this.price;
			}
		},
		dowithdraw() {
			if (parseFloat(this.withdraw) < 1) {
				this.$refs.uToast.show({
					title: '提现金额最低为1元!',
					type: 'error'
				});
				return;
			}
			if (this.withdraw < this.price || this.withdraw === this.price) {
				this.$u.api
					.doWithdraw({
						price: this.withdraw
					})
					.then(res => {
						console.log(res);
						let item = {
							user: this.phone,
							price: this.withdraw,
							istrue: true
						};
						this.price = parseInt(this.price) - parseInt(this.withdraw);
						uni.setStorageSync('price', this.price);
						uni.navigateTo({
							url: '/pages/center/withdraw/withdrawResult?item=' + encodeURIComponent(JSON.stringify(item))
						});
					})
					.catch(err => {
						console.log(err);
						let item = {
							user: this.phone,
							price: this.withdraw,
							istrue: false
						};
						uni.navigateTo({
							url: '/pages/center/withdraw/withdrawResult?item=' + encodeURIComponent(JSON.stringify(item))
						});
					});
			} else {
				this.$refs.uToast.show({
					title: '请检查余额是否足够!',
					type: 'error'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.withdraw {
	.card {
		background-color: #ffffff;
		padding: 28rpx 40rpx 36rpx 56rpx;
		margin: 10rpx 20rpx 44rpx;
		// box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.09);
		border-radius: 12rpx;
		overflow: hidden;
	}
}
</style>
